<template>
    <div>
        <el-container>
            <el-main>
                <div class="report">
                    <p>
                        咨询申请<el-button type="primary" size="large" class="addAppointmentBtn" @click="dialogTableVisible = true">申请</el-button>
                    </p>
                </div>
                <div clss="report-info-body">
                    <div>
                        <el-table fixed  stripe style="width: 100%" max-height="500"
                                  :data="reportForm.slice((currentPage-1)*PageSize,currentPage*PageSize)">
                            <el-table-column prop="stu_name" label="学生姓名" align="center"></el-table-column>
                            <el-table-column prop="askReason" label="咨询原因" align="center"></el-table-column>
                            <el-table-column prop="week_name" label="工作日" align="center"></el-table-column>
                            <el-table-column prop="detail_time" label="时间段" align="center"></el-table-column>
                            <el-table-column align="center" label="操作" fixed="right" width="200">
                                <template #default="scope">
                                    <el-button size="mini" type="primary" @click="handleDelete(scope.$index, scope.row)" style="background-color: #409EFF;border-color: #409EFF;color:#fff;">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="block">
                            <el-pagination
                                    :hide-on-single-page="value"
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage"
                                    :page-sizes="[10, 20, 30, 40]"
                                    :page-size="PageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="reportForm.length">
                            </el-pagination>
                        </div>
                    </div>
                </div>
                <div>
                    <el-dialog title="咨询申请" v-model="dialogTableVisible" :before-close="handleClose">
                        <el-form :model="formData" :rules="addRules">
                            <el-form-item label="学生姓名" prop="stu_name" style="width: 80%;">
                                <el-select v-model="formData.stu_name"  >
                                    <el-option
                                            v-for="item in Stus"
                                            :label="item.stuName"
                                            :value="item.stuName"
                                            :key="item.stuName"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="工作日" prop="week_name" style="width: 80%;">
                                <el-select name="time" v-model="formData.week_name" @change="getDict_Time">
                                    <el-option
                                            v-for="item in timeDict_Week"
                                            :label="item"
                                            :value="item"
                                            :key="item"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="时间段" prop="detail_time" style="width: 80%;">
                                <el-select v-model="formData.detail_time">
                                    <el-option
                                            v-for="item in timeDict_Time"
                                            :label="item"
                                            :value="item"
                                            :key="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="咨询原因" prop="askReason" style="width: 80%;">
                                <el-input name="askReason" v-model="formData.askReason" ></el-input>
                            </el-form-item>
                        </el-form>
                        <template #footer>
                            <el-button @click="dialogTableVisible = false">取消</el-button>
                            <el-button type="primary" @click="handleSubmit">提交</el-button>
                        </template>
                    </el-dialog>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import request from "../../utils/request";
    import {getWeekday} from "../../api/time";
    import {ElMessage} from "element-plus";
    export default {
        name: "application",
        data(){
            return{
                disabled:true,
                dialogTableVisible : false,
                value:true,
                Stus:[],
                timeDict_Time:[],
                timeDict_Week:[],
                Times:[],

                currentPage:1,
                PageSize:5,
                reportForm:[{
                    adutStatus: '',
                    askReason: '',
                    id: '',
                    isDelete: '',
                    stuId: '',
                    timeId: '',
                }],
                formData:{
                    adutStatus: '',
                    askReason: '',
                    id: '',
                    isDelete: '',
                    stuId: '',
                    timeId: '',
                },
                submitForm:{
                    adutStatus: '',
                    askReason: '',
                    stuId: '',
                    timeId: '',
                },
                addRules: {
                    stu_name:[{
                        required : true,
                        message:'不能为空',
                        trigger:'change'
                    }],
                    week_name:[{
                        required : true,
                        message:'不能为空',
                        trigger:'change'
                    }],
                    detail_time:[{
                        required : true,
                        message:'不能为空',
                        trigger:'change'
                    }],
                }
            }
        },

        methods :{


            submitApplication(query){
                return request({
                    url:'/api/askConsult/askConsult',
                    method:'post',
                    data:query,
                })
            },

            async handleSubmit(){
                this.dialogTableVisible =false
                this.Stus.forEach(x =>{
                    console.log(x)
                    if(this.formData.stu_name===x.stuName){
                        this.formData.stuId = x.id
                    }
                })
                this.Times.forEach(x => {
                    console.log(x)
                    if(this.formData.detail_time === x.timeDay && this.formData.week_name === x.weakDay){
                        this.formData.timeId = x.id
                    }
                })
                await console.log(this.formData)
                this.submitForm.stuId=this.formData.stuId
                this.submitForm.timeId=this.formData.timeId
                this.submitForm.askReason=this.formData.askReason
                this.submitForm.adutStatus=this.formData.adutStatus
                await console.log(this.submitForm)
                this.submitApplication(this.submitForm).then(res=>{
                    if(res.code === 1 ) {
                        console.log(res)
                        this.getData()
                        ElMessage.success(res.data)
                    }else{
                        this.getData()
                        this.$message.warning("申请失败")
                        ElMessage.error(res.data);
                    }
                })
            },


            getTimeid(){
                return request({
                    url:'/api/singleTime',
                    method:'get'
                })
            },


            get_Time(){
                this.getTimeid().then(res=>{
                    if(res.code ===1 ){
                        console.log(res)
                        this.Times = res.data
                    }
                })
            },


            getTimeByWeekday(query){
                return request({
                    url: '/api/singleTime/dict/time/'+query,
                    method: 'get'
                })
            },

            getDict_Time(e){
                this.getTimeByWeekday(e).then(res=>{
                    if(res.code === 1){
                        console.log(res)
                        this.timeDict_Time = res.data
                    }
                })
            },

            getSingleTimeDict_Week(){
                getWeekday().then(res=>{
                    if(res.code === 1){
                        console.log(res)
                        this.timeDict_Week = res.data
                    }
                })
            },


            getstu(){
                return request({
                    url:'/api/user',
                    method:'get'
                })
            },

            get_stu(){
                this.getstu().then(res=>{
                    if(res.code===1){
                        console.log(res)
                        this.Stus=res.data
                    }
                })
            },

            //删除接口
            deleteById(query){
                return request({
                    url: '/api/askConsult/deleteChange',
                    method: 'put',
                    params:{stuId:query},
                })
            },



            //删除
            handleDelete(index,row){
                console.log(row.stuId)
                this.deleteById(row.stuId).then(res=>{
                    if(res.code === 1){
                        console.log(res)
                        this.getData()
                        this.$message.success("删除成功")
                    } else {
                        this.getData()
                        this.$message.warning("删除失败")
                    }
                })
                this.getData()
            },

            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.PageSize = val
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val
            },



            getrecordReport(){
                return request({
                    url:'/api/askConsult/getAll',
                    method:'get'
                })
            },
            //获取数据
            getData(){
                this.getrecordReport().then(res => {
                    if(res.code ===1) {
                        this.reportForm = res.data;
                        console.log(res.data)
                    }
                })
            },
        },
        created() {
            this.getData()
            this.get_stu()
            this.getSingleTimeDict_Week()
            this.getDict_Time()
            this.get_Time()
        }
    }
</script>

<style scoped>
    .report {
        width: auto;
        height: 56px;
        background-color: #EDEFF2;
        font-size: 22px;
        /* font-family: SimHei; */
        font-weight: 400;
        color: #333333;
        line-height: 48px;
        border-left: 6px solid #409EFF;
        text-align: left;
    }

    .addAppointmentBtn {
        width: 140px;
        height: 44px;
        color: #ffffff;
        background-color: #409EFF;
        float: right;
        margin-right: 70px;
    }
</style>